<template>
	<view class="margin">
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="margin-sm">NoticeBar 滚动通知</view>
		<u-notice-bar type="error" mode="horizontal" :list="list"></u-notice-bar>
		<u-notice-bar type="warning" mode="horizontal" :is-circular="false" :list="list"></u-notice-bar>
		<u-notice-bar type="success" mode="vertical" :list="list"></u-notice-bar>
		<view class="margin-sm">AlertTips 警告提示</view>
		<u-alert-tips type="error" :title="title" close-text="close" :description="description" :close-able="true"></u-alert-tips>
		<u-alert-tips type="warning" :show-icon="true" :title="title" close-text="close" :description="description" :close-able="true"></u-alert-tips>
		<u-alert-tips :show="showAlertTips" type="success" @close="showAlertTips = false" :title="title" :description="description" :close-able="false"></u-alert-tips>
		<view class="margin-sm">TopTips 顶部提示</view>
		<u-button type="default" @click="showTopTips">默认 showTopTips</u-button>
		<view class="margin-sm">Toast 消息提示</view>
		<u-button type="success" @click="showToast">成功按钮showToast</u-button>
		<u-toast ref="uToast" />
		<view class="margin-sm">Popup 弹出层</view>
		<u-button @click="showPopup = true">Popup 弹出层</u-button>
		<u-popup v-model="showPopup"><view>出淤泥而不染，濯清涟而不妖</view></u-popup>
		<u-popup v-model="showPopup" mode="top" length="60%"><view>等闲变却故人心，却道故人心易变</view></u-popup>
		<u-popup v-model="showPopup" mode="center" width="500rpx" height="600px"><view>骊山语罢清宵半，泪雨霖铃终不怨</view></u-popup>
		<view class="margin-sm">Modal 模态框</view>
		<u-button type="info" @click="ModalOpen">Modal 模态框</u-button>
		<u-modal ref="uModal" v-model="Modalshow" :title="title" :content="description" @confirm="confirmModal" @cancel="cancelModal" show-cancel-button></u-modal>
		<view class="margin-sm">fullScreen 压窗屏</view>
		<u-button type="warning" @click="openfullScreen">警告按钮-fullScreen 压窗屏-App</u-button>
		<view class="margin-sm">Button 按钮</view>
		<u-button type="error">危险按钮</u-button>
		<u-button size="medium">夜雨</u-button>
		<u-button size="mini">十年灯</u-button>
		<u-button>默认按钮</u-button>
		<u-button shape="square">按钮为半圆形</u-button>
		<u-button :plain="true">按钮的镂空状态</u-button>
		<u-button :ripple="true" ripple-bg-color="#909399">按钮的水波纹效果</u-button>
		<u-button :ripple="true">按钮的水波纹效果</u-button>
	</view>
</template>

<script>
var _page;
export default {
	computed: {},
	data() {
		return {
			title: '寻隐者不遇',
			description: '松下问童子，言师采药去。只在此山中，云深不知处。',
			showAlertTips: true,
			showPopup: false,
			Modalshow: false,
			list: ['寒雨连江夜入吴', '平明送客楚山孤', '洛阳亲友如相问', '一片冰心在玉壶']
		};
	},
	onLoad(options) {
		_page = this;
		console.log('options传值==', options);
	},
	mounted() {},
	onReady() {
		this.$refs.uToast.show({
			title: '进入页面就显示toast',
			type: 'primary'
		});
		this.$refs.uTips.show({
			title: '进入页面就显示铁马冰河入梦来',
			type: 'success',
			duration: '2300'
		});
	},
	methods: {
		showToast() {
			this.$refs.uToast.show({
				title: '登录成功',
				type: 'warning'
			});
		},
		showTopTips() {
			this.$refs.uTips.show({
				title: '铁马冰河入梦来',
				type: 'success',
				duration: '2300'
			});
		},
		ModalOpen() {
			this.Modalshow = true;
			console.log('Modal 模态框 ModalOpen');
		},
		confirmModal() {
			console.log('Modal 模态框 confirmModal');
			this.Modalshow = false;
		},
		cancelModal() {
			console.log('Modal 模态框 cancelModal');
			this.Modalshow = false;
		},
		openfullScreen() {
			this.$Router.push({ name: 'u-full-screen' });
		}
	}
};
</script>

<style lang="scss"></style>
